<template>
 <div class="wrapper">
    <div class="header">
      <img src="@/assets/account/login-center-bg-form-t.png" alt="">
    </div>
    <div class="container">
      <div class="login-form">
         <div class="element-1">
            <img src="@/assets/account/login-title.svg" alt="">
         </div>
         <div class="title">密码登录</div>
         <el-form label-position="top" :model="loginForm" :rules="rules" ref="ruleFormRef">
            <el-form-item label="账号" prop="username">
               <el-input v-model="loginForm.username" :prefix-icon="User" style="width: 330px" placeholder="账号" />
            </el-form-item>
            <el-form-item label="密码" prop="password">
               <el-input v-model="loginForm.password" :prefix-icon="Lock" type="password" show-password style="width: 330px" placeholder="密码" />
            </el-form-item>
            <el-form-item>
               <el-button type="primary" :loading="loading" style="width: 330px;margin-top: 46px;" @click="onLogin">登录</el-button>
            </el-form-item>
         </el-form>
         <div class="footer">版权所有© 2024 安徽省阜阳市阜南县</div>
         <div class="element-2">
            <img src="@/assets/account/login-center-bg-form.png" alt="">
         </div>
         <div class="element-3">
            <img src="@/assets/account/login-center-bg-form-b-l.png" alt="">
         </div>
      </div>
    </div>
 </div>
</template>

<script setup lang='ts'>
import { User, Lock } from '@element-plus/icons-vue'
import { reactive,ref } from 'vue'
import { getTime } from '@/utils/time'
//引入用户相关的仓库
import useUserStore from '@/store/modules/user'
let useStore = useUserStore()

import { useRouter,useRoute } from 'vue-router'
let $router = useRouter()
let $route = useRoute()

import { ElNotification } from 'element-plus'

let loginForm = reactive({ username: 'admin',password:'111111' })

let loading = ref(false)
//点击登录按钮
const onLogin = async ()=>{
   await ruleFormRef.value.validate();

   loading.value = true
   try {
      await useStore.userLogin(loginForm)

      //判断登录的时候，判断路由是否有query参数
      let redirect:any = $route.query.redirect
      $router.push({path:redirect || '/'})
      ElNotification({
         type: 'success',
         title:`HI,${getTime()}好`,
         message: '欢迎回来',
      })
      loading.value = false
   } catch (error) {
      loading.value = false
      ElNotification({
         type: 'error',
         message: (error as Error).message,
      })
   }
}

//表单校验
//自定义校验规则
const validateUserName = (rule: any, value: any, callback: any)=>{
   if(value.length >= 5){
      callback()
   }else{
      callback(new Error('账号长度至少5位'))
   }
}

const validatePassword = (rule: any, value: any, callback: any)=>{
   if(value.length >= 6){
      callback()
   }else{
      callback(new Error('密码长度至少6位'))
   }
}

const rules = reactive({
   username: [
      { validator: validateUserName, trigger: 'change' }
      // { required: true, message: '请输入账号', trigger: 'blur' },
      // { min: 5, max: 10, message: '账号长度至少5位', trigger: 'blur' },
   ],
   password: [
   { validator: validatePassword, trigger: 'change' }
      // { required: true, message: '请输入密码', trigger: 'blur' },
      // { min: 6, max: 15, message: '密码长度至少6位', trigger: 'blur' },
   ],
})



let ruleFormRef = ref()



</script>

<style scoped lang='scss'>
.wrapper{
   display: flex;
   flex-direction: column;
   width: 100vw;
   height: 100vh;
   .header{
      height: 60px;
      background: #4285F4;
      padding: 15px 260px;
      box-sizing: border-box;
      img{
         width: 309px;
         height: 100%;
      }
   }
   .container{
      flex: 1;
      background: #EDF1F4;
      box-sizing: border-box;
      .login-form{
         position: relative;
         width: 860px;
         height: 580px;
         background: #FFFFFF;
         margin: 20px auto;
         border-radius: 8px;
         padding: 50px 60px;
         box-sizing: border-box;
         .footer{
            position: absolute;
            bottom: 22px;
            left: 50%;
            transform: translateX(-50%);
            color: #666;
            font-weight: 400;
            font-size: 12px;
         }
         .element-1{
            width: 254px;
            height: 20px;
            img{
               width: 100%;
               height: 100%;
            }
         }
         .title{
            font-weight: 400;
            font-size: 20px;
            color: #333333;
            margin: 56px 0 40px
         }
         .element-2{
            position: absolute;
            top: 20px;
            right: -150px;
            width: 554px;
            height: 545px;
            img{
               width: 100%;
               height: 100%;
            }
         }
         .element-3{
            position: absolute;
            left: -30px;
            bottom: -30px;
            width: 55px;
            height: 65px;
            img{
               width: 100%;
               height: 100%;
            }
         }
      }
   }
}
</style>